<template>
  <div class="revenue-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div v-for="(item, index) of title" :key="index" class="title" @click="TabClick(index)">{{ item }}</div>
      </div>
    </div>
    <div v-if="title.length === 1" class="middle">
      <Input ref="searchInput" placeholder="请输入业务员姓名/手机号" @search="handleSearch" />
    </div>
    <div class="table-wrapper">
      <!-- <revenue-table :list="list" /> -->
      <component :is="cmpName" :list="list" @rankItemClick="handleRankItemClick" />
    </div>
    <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import RevenueTable from './components/revenue/revenue-table'
import RevenueJunior from './components/revenue/revenue-junior'
import Recommend from './components/revenue/recommend'
import RevenueShop from './components/revenue/revenue-shop'
import { getRevenRankList, getRevenueJuniorList, getRecommendList, getRevenueShopList } from '@/api/vip'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Input,
    RevenueTable,
    RevenueJunior,
    Recommend,
    RevenueShop,
    Pagination
  },
  data() {
    return {
      cmpName: RevenueTable,
      title: ['分佣排行'],
      currentPage: 1,
      total: 0,
      pageSize: 10,
      list: [],
      query: ''
    }
  },
  created() {
    this._getRevenRankList({ page: this.currentPage })
  },
  methods: {
    handleRankItemClick(scope, name) {
      this.currentPage = 1
      this.clearInput()
      this.list = []
      switch (name) {
        case '下级':
          this.cmpName = RevenueJunior
          this._getRevenueJuniorList({ page: this.currentPage, id: scope.row.id })
          break
        case '推荐奖励' :
          this.cmpName = Recommend
          this._getRecommendList({ page: this.currentPage, id: scope.row.id })
          break
        case '购物收益' :
          this.cmpName = RevenueShop
          this._getRevenueShopList({ page: this.currentPage, id: scope.row.id })
          break
      }
      this.title.push('/' + scope.row.nickname + '-' + name)
    },
    TabClick(index) {
      switch (index) {
        case 0:
          this.cmpName = RevenueTable
          this.title.splice(index + 1)
          break
      }
      switch (this.cmpName) {
        case RevenueTable:
          this._getRevenRankList({ page: this.currentPage })
          break
      }
    },
    handleSearch(query) {
      this.query = query
      this.currentPage = 1
      this._getRevenRankList({ page: this.currentPage, keyword: this.query })
    },
    handleNextPage(currentPage) {
      this.currentPage = currentPage
      this._getRevenRankList({ page: this.currentPage, keyword: this.query })
    },
    clearInput() {
      this.$refs.searchInput.clear()
    },
    _getRevenRankList({ page, keyword }) {
      getRevenRankList({ page, keyword })
        .then(res => {
          if (res.code === ERR_OK) {
            this.list = res.data.list
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getRevenueJuniorList({ page, id }) {
      getRevenueJuniorList({ page, id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.list.data
            this.total = res.data.list.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getRecommendList({ page, id }) {
      getRecommendList({ page, id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.list
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getRevenueShopList({ page, id }) {
      getRevenueShopList({ page, id })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.list = res.data.list
            this.total = res.data.total
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/el-pagination.scss';
.revenue-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
}
</style>
